<template>
  <div class="category">
    <div v-if="localData.length > 0">
      <draggable
        v-model="localData"
        chosenClass="chosen"
        forceFallback="true"
        group="people"
        animation="1000"
        @start="onStart"
        @end="onEnd"
        :disabled="type == 'view'"
      >
        <transition-group>
          <div
            :class="[
              'item',
              'flexbet',
              activeIndex == index ? 'active_item' : '',
            ]"
            v-for="(data, index) in localData"
            :key="index"
          >
            <div
              @click="handleSelect(data, index)"
              @dblclick="type == 'edit' ? handleEmit(data, 'rename') : ''"
              v-if="!data.showRename"
              class="label overtxt"
            >
              {{ data.categoryName }}
            </div>
            <div v-if="data.showRename" class="label">
              <el-input
                show-word-limit
                maxlength="8"
                v-input-restrict
                clearable
                size="small"
                ref="resetName"
                @blur="editName(data)"
                @change="editName(data, 2)"
                v-model="data.categoryName"
                placeholder="请输入名称"
                style="width: 100%"
              />
            </div>
            <el-dropdown
              placement="bottom-start"
              trigger="click"
              v-if="type == 'edit' && isManager($store.getters.roles)"
            >
              <img
                class="more"
                src="@/assets/images/courseadd/more.png"
                alt=""
                @click.stop=""
              />
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item
                  @click.native.stop="handleEmit(data, 'rename')"
                >
                  <span>重命名</span>
                </el-dropdown-item>
                <el-dropdown-item
                  @click.native.stop="handleEmit(data, 'addReviewers')"
                >
                  <span>{{
                    !data.professionalId ? "添加审核人" : "编辑审核人"
                  }}</span>
                </el-dropdown-item>
                <!-- <el-dropdown-item
                  v-if="!data.qrCode"
                  @click.native.stop="handleEmit(data, 'generateAQrCode')"
                >
                  <span>生成二维码</span>
                </el-dropdown-item> -->
                <el-dropdown-item
                  @click.native.stop="handleEmit(data, 'delete')"
                >
                  <span>删除</span>
                </el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>

            <!-- 图片预览 -->
            <el-image
              v-if="type == 'view' && data.qrCode"
              style="width: 30px; height: 30px; margin: 5px 0 0 0"
              :src="data.qrCode"
              fit="cover"
              :width="40"
              @click="down(data.qrCode)"
              :preview-src-list="[data.qrCode]"
            />
          </div>
        </transition-group>
      </draggable>
      <el-button
        v-preventReClick
        type="primary"
        plain
        size="mini"
        @click="handleEmit(data, 'add')"
        v-if="type == 'edit'"
        style="width: 100%"
      >
        添加类目
      </el-button>
    </div>
    <div v-else>
      <el-button
        v-preventReClick
        type="primary"
        plain
        size="mini"
        @click="handleEmit(data, 'add')"
        v-if="type == 'edit'"
        style="width: 100%"
      >
        添加类目
      </el-button>
      <el-empty description="暂无分类"></el-empty>
    </div>
  </div>
</template>
  
<script>
import { isManager } from "@/utils/auth";
import draggable from "vuedraggable";
export default {
  //注册draggable组件
  components: {
    draggable,
  },
  props: {
    activeIndex: [String, Number],
    type: {
      type: String,
      default: "edit",
    },
    data: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      disabled: false,
      drag: false,
      //定义要被拖拽对象的数组
      localData: [...this.data], // 使用 prop 的副本作为局部数据
    };
  },
  watch: {
    data(newVal) {
      console.log(newVal);
      this.localData = [...newVal]; // 当 prop 数据发生变化时，更新局部数据
    },
  },
  methods: {
    down(code) {
      // 下载二维码图片
      window.location.href = code;
    },
    /* 是否是总部人员*/
    isManager(e) {
      return isManager(e);
    },
    inputfoucus() {
      this.$nextTick(() => {
        console.log(this.$refs);
        this.$refs["resetName"][0].focus();
      });
    },
    //开始拖拽事件
    onStart() {
      this.drag = true;
    },
    //拖拽结束事件
    onEnd() {
      this.$emit("drag", this.localData);
    },
    handleEmit(data, name) {
      if (name == "rename") {
        data.showRename = true;
        this.$nextTick(() => {
          this.$refs["resetName"][0].focus();
        });
      } else {
        this.$emit(name, data);
      }
    },
    editName(data, type) {
      if (type == 2) {
        this.$emit("rename", data);
      } else {
        data.showRename = false;
      }
    },
    handleSelect(data, index) {
      this.$emit("select", data);
      this.$emit("update:activeIndex", index);
    },
  },
};
</script>
<style scoped lang="scss">
.active_item {
  background-color: #f5f7fa;
}
/*被拖拽对象的样式*/
.item {
  margin-bottom: 3px;
  padding: 0 10px;
  width: 100%;
  cursor: pointer;
  line-height: 40px;
  .label {
    flex: 1;
    padding-right: 10px;
  }
  .more {
    margin-top: 15px;
    margin-right: 10px;
    width: 18px;
    height: 12px;
  }
}
/*选中样式*/
.chosen {
}
</style>
  